<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else style="height: 100%">
        <div class="host-body" style="height: 100%">
          <div class="header">
            <!-- <div class="highlight"></div> -->
            <div class="title-center">晓予开发平台</div>
            <div class="d-flex jc-between descbox ">
              <div style="display: flex; align-items: center;">
                <div class="title_l font">安全生产</div>
                <div class="title_l font" style="padding-left: 5px;">236天</div>
              </div>
              <div class="d-flex title_r">
                <!-- <div class="font" style="padding-right: 10px;">区域选择</div> -->
                <el-dropdown trigger="click" placement="bottom" style="margin-right: 15px;"
                  @command="handleCommandRegion">
                  <span class="el-dropdown-link font" style="cursor: pointer;">
                    {{ region.value ? region.label : '区域选择' }}
                  </span>
                  <el-dropdown-menu slot="dropdown" size="medium">
                    <el-dropdown-item :command="index" v-for="(item, index) in regionList" :key="index">{{ item.label
                                          }}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <!-- <div class="font">项目选择</div> -->
                <el-dropdown trigger="click" placement="bottom" @command="handleCommandProject">
                  <span class="el-dropdown-link font" style="cursor: pointer;">
                    {{ project.label }}
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="index" v-for="(item, index) in projectList" :key="index">{{ item.label
                                          }}</el-dropdown-item>
                    <!-- <el-dropdown-item command="0">盘古小区</el-dropdown-item>
                    <el-dropdown-item command="1">商业中心</el-dropdown-item>
                    <el-dropdown-item command="2">中原大厦</el-dropdown-item> -->
                  </el-dropdown-menu>
                </el-dropdown>
                <div style="padding-left: 15px;cursor: pointer;" class="title_l font" @click="open">远程值守</div>
              </div>
              <Screenfull class="text" ref="screenfull" />
            </div>
          </div>
          <div style=" padding-left: 15px; padding-right: 15px; ">
            <TotalTemp v-if="selectHeader == 'total'" />
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import '@/api/ops/flexible.js'
import TotalTemp from './total'
import Screenfull from '@/components/Screenfull'
import { launchFullscreen } from '@/api/ops/dashboard'

export default {
  data() {
    return {
      stompClient: null,
      loading: true,
      selectHeader: 'total',
      region: { value: '', label: '区域选择' },
      project: { value: '', label: '项目选择' },
      regionList: [
        { value: '', label: '全国', distance: 70, top: -20 },
        { value: 0, label: '东北地区', distance: 130, top: -70, minBeta: -125, maxBeta: -100, beta: -105, children: ['黑龙江省', '吉林省', '辽宁省'] },
        { value: 1, label: '华北地区', distance: 100, top: -70, children: ['北京市', '天津市', '河北省', '山西省', '内蒙古自治区'] },
        { value: 2, label: '华中地区', distance: 160, top: -70, minBeta: -125, maxBeta: -100, beta: -105, children: ['河南省', '湖北省', '湖南省'] },
        { value: 3, label: '华东地区', distance: 160, top: -70, minBeta: -125, maxBeta: -100, beta: -105, children: ['上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '台湾省'] },
        { value: 4, label: '华南地区', distance: 78, top: 90, children: ['广东省', '广西壮族自治区', '海南省', '香港特别行政区', '澳门特别行政区'] },
        { value: 5, label: '西北地区', distance: 90, top: -60, children: ['陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区'] },
        { value: 6, label: '西南地区', distance: 90, top: -20, children: ['四川省', '贵州省', '云南省', '西藏自治区', '重庆市'] },
      ],
      projectList: [
        { value: '', label: '项目选择', regionId: 'b1e0af0a8d0c4c35a5040bada7c79a18' },
        { value: 0, label: '万科云科技大厦', regionId: 'b1e0af0a8d0c4c35a5040bada7c79a18' },
        { value: 1, label: '红门科技园', regionId: 'b1e0af0a8d0c4c35a5040bada7c79a18' },
        { value: 2, label: '雅居乐中心', regionId: 'b1e0af0a8d0c4c35a5040bada7c79a18' },
        { value: 3, label: '吉林大学', regionId: 'b1e0af0a8d0c4c35a5040bada7c79a18' },
        { value: 4, label: '南山金融大厦', regionId: 'b1e0af0a8d0c4c35a5040bada7c79a18' },
        { value: 5, label: '天河雅居乐中心', regionId: 'b1e0af0a8d0c4c35a5040bada7c79a18' },
      ],
    }
  },
  components: {
    Screenfull,
    TotalTemp,
  },
  mounted() {
    this.cancelLoading()
  },
  beforeMount() {
    //stopF5Refresh()
    launchFullscreen()
    // this.refreshToken()
  },
  methods: {
    // async logout() {
    //   this.$confirm('确定注销并退出系统吗？', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     this.$store.dispatch('LogOut').then(() => {
    //       location.reload()
    //       sessionStorage.removeItem('communityName')
    //       sessionStorage.removeItem('communityId')
    //     })
    //   })
    // },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
        this.project = this.projectList[0]
        this.$store.dispatch("settings/changeSetting", {
          key: "project",
          value: this.projectList[0],
        });
      }, 100)
    },
    handleCommandRegion(command) {
      this.region = this.regionList[command]
      this.$store.dispatch("settings/changeSetting", {
        key: "region",
        value: this.regionList[command],
      });
      // this.$message('click on item ' + command);
    },
    handleCommandProject(command) {
      this.project = this.projectList[command]
      this.$store.dispatch("settings/changeSetting", {
        key: "project",
        value: this.projectList[command],
      });
      // this.$message('click on item ' + command);
    },
    open() {
      window.location.href = 'http://b.gateares.com:30015'
    }
    // refreshToken() {
    //   setInterval(function () {
    //     refreshToken()
    //   }, 1000 * 60 * 10)
    // }
  }
}
</script>

<style lang="scss">
@import '~@/assets/ops/styles/style.scss';
@import '~@/assets/ops/styles/index.scss';

// .highlight {
//   position: absolute;
//   height: 100%;
//   height: 4px;
//   width: 100%;
//   background: rgba(29, 72, 196, 0.4);
//   box-shadow: rgba(29, 72, 196, 0.4) 0px 0px 25px 3px inset;
//   // background-image: url("~@/assets/background/heade.svg");
//   // background-size: 100% 100%;
//   left: -100%;
//   top: 0;
//   animation: leftTright 10s linear infinite;
// }

// @keyframes leftTright {
//   0% {
//     transform: translate(-100px);
//     left: -100%;
//   }

//   50% {
//     transform: translate(0);
//     left: 0;
//     top: 100%;
//     // opacity: 1;
//   }

//   100% {
//     transform: translate(0);
//     left: 100%;
//   }
// }
</style>
